<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#menu{
		width: 206px;
		height: 408px;
		border: 2px solid #E43C3F;
		margin: 30px;
		position: relative;
	}
	#menu .l{
		width: 206px;
		height: 28px;
		border-bottom: 1px solid white;
		background: #FAFAFA;
		list-style: none;
	}
	#menu .l .left{
		font-size: 13px;
		font-family: 微软雅黑;
		line-height: 28px;
		text-indent: 20px;
	}
	#menu .l .left.cur{
		background: yellow;
		position: relative;
		z-index: 5;
	}
	#menu .l .hidebox{
		width: 500px;
		height: 500px;
		border: 1px solid black;
		background: yellow;
		position: absolute;
		left: 205px;
		top: 0px;
		font-size: 40px;
		font-family: 微软雅黑;
		line-height: 500px;
		text-align: center;
		color: #333;
		display: none;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	
$(function(){
	$('#menu li').mouseover(function() {
		$(this).find('.left').addClass('cur');//给左侧的p标签加class
		$(this).find('.hidebox').show();//让这个li里面的隐藏区域显示
	});

	$('#menu li').mouseout(function() {
		$(this).find('.left').removeClass('cur');//给左侧的p标签加class
		$(this).find('.hidebox').hide();//让这个li里面的隐藏区域显示
	});
})

</script>
</head>

<body>

<ul id="menu">
	<li class="l">
		<p class="left">图书、音像、数字商品</p>
		<div class="hidebox">图书、音像、数字商品</div>
	</li>
	<li class="l">
		<p class="left">家用电器</p>
		<div class="hidebox">家用电器</div>
	</li>
	<li class="l">
		<p class="left">手机、数码、京东通信</p>
		<div class="hidebox">手机、数码、京东通信</div>
	</li>
	<li class="l">
		<p class="left">电脑、办公</p>
		<div class="hidebox">电脑、办公</div>
	</li>
	<li class="l">
		<p class="left">家居、家具、家装、厨具</p>
		<div class="hidebox">家居、家具、家装、厨具</div>
	</li>
</ul>





</body>
</html>
